<template>
  <el-container class="app-wrapper">
    <!--侧边栏-->
    <el-aside :width="asideWidth" class="sidebar-container">
      <Menu/>
    </el-aside>

    <!--主要内容-->
    <el-container class="container" :class="{hiderContainer:!store.getters.GET_TYPE}">
      <!--头部-->
      <el-header>
        <Header/>
      </el-header>

      <!--中间内容-->
      <el-scrollbar>
        <el-main>
          <router-view/>
        </el-main>
      </el-scrollbar>

    </el-container>

  </el-container>
</template>

<script setup>
import Menu from '@/views/layout/menu'
import Header from '@/views/layout/header'
import variables from '@/assets/styles/variables.module.scss'
import { computed, ref } from 'vue'
import store from '@/store'

const asideWidth = computed(() => {
  return store.getters.GET_TYPE ? variables.sideBarWidth : variables.hideSideBarWidth
})
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .sidebar-container {
    background-color: #324257FF;
    height: 100%;
  }

  .container {
    width: calc(100% - 210px);
    height: 100%;
    background-color: #f5f5f5;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    transition: all 0.28s;

    .el-header {
      padding-left: 0;
      padding-right: 0;
    }

    &.hiderContainer {
      width: calc(100% - 70px);
    }
  }
}

:deep(ul.el-menu) {
  border-right-width: 0;
}
</style>